<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>气象控制</title>
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
		<meta content="" name="description" />
		<meta content="" name="author" />
		
		<link rel="stylesheet" href="../common/css/mui.min.css" />
		<link rel="stylesheet" href="../common/css/common.css" />
		<script src="../common/js/jquery.js"></script>
		  <script src="../common/js/layer/layer.js"></script>
		<script src="../common/js/jquery.method.js"></script>
		<script src="../js/common.js"></script>
		<style type="text/css">
			.period-time{
	display: inline-block;
	width: 40%;
}
.period-num{
	display: inline-block;
	width: 33%;
	text-align: left;
}
.period-list ul li{
	padding-left:30px;
	padding-right:20px;
}
.sp_img{
	display: inline-block;
	width: 24%;
}
.sp_img img{
	width: 50%;
}
		</style>
	</head>
	<body class="fabu" style="background: #fff;">
		<div class="middle-content" style="margin-top:0;">
			<!-- 内容start -->
			<div class="header">
				<div class="header-left">
					<a class="sb-back2" href="#" onclick="backTo()" title="返回"></a>
				</div>
				<div class="header-middle">气象控制</div>
			</div>
			<div style="height:50px;width: 100%;"></div>			
		</div>
		<div class="period-list">
			<ul class="mui-table-view data-sj-ul right-content-ul">
    				<li class="mui-table-view-cell line-ul-li">
    					<span class="sp_img"><img src="../pc/images/tmp/temperature.png"></span>
    					<span class="period-time">温度</span>
    					<span class="period-num temperature" ></span>
    				</li>
    				<li class="mui-table-view-cell line-ul-li">
    					<span class="sp_img"><img src="../pc/images/tmp/humidity.png"></span>
    					<span class="period-time">湿度</span>
    					<span class="period-num humidity"></span>
    				</li>
    				<li class="mui-table-view-cell line-ul-li">
    					<span class="sp_img"><img src="../pc/images/tmp/wind_ direction.png"></span>
    					<span class="period-time">风向</span>
    					<span class="period-num wind"></span>
    				</li>
    				<li class="mui-table-view-cell line-ul-li">
    					<span class="sp_img"><img src="../pc/images/tmp/wind_speed.png"></span>
    					<span class="period-time">风速</span>
    					<span class="period-num speed"></span>
    				</li>
    				<li class="mui-table-view-cell line-ul-li">
    					<span class="sp_img"><img src="../pc/images/tmp/noise.png"></span>
    					<span class="period-time">噪音</span>
    					<span class="period-num noise"></span>
    				</li>
    				<li class="mui-table-view-cell line-ul-li">
    					<span class="sp_img"><img src="../pc/images/tmp/pressure.png"></span>
    					<span class="period-time">气压</span>
    					<span class="period-num pressure"></span>
    				</li>
    				<li class="mui-table-view-cell line-ul-li">
    				<span class="sp_img"><img src="../pc/images/tmp/pm25.png"></span>
    					<span class="period-time">pm2.5</span>
    					<span class="period-num pm25"></span>
    				</li>
    				<li class="mui-table-view-cell line-ul-li">
    				<span class="sp_img"><img src="../pc/images/tmp/pm10.png"></span>
    					<span class="period-time">pm 10</span>
    					<span class="period-num pm10"></span>
    				</li>
    			</ul>
    		</div>
	</body>
	 <script type="text/javascript">
	 $(function(){
	 	deviceInfo();
	 });
  function deviceInfo(){
  	var id=localStorage.getItem("id");
        $.ajax({
            type: "post",
            url: "http://"+remote_ip+":"+remote_port+"/"+remote_name+"/app/screen/show/weatherInfo?id="+id, //路径 
            async: false,
            dataType: "json",
            success: function (data) {
               if(data){
                    $(".right-content-ul .temperature").text(data.temperature+"℃");
                    $(".right-content-ul .humidity").text(data.humidity+"%");
                    $(".right-content-ul .wind").text(data.wind);
                    $(".right-content-ul .speed").text(data.speed);
                    $(".right-content-ul .noise").text(data.noise+"分贝");
                    $(".right-content-ul .pressure").text(data.pressure+"mba");
                    $(".right-content-ul .pm25").text(data.pm25+"ug/m³");
                    $(".right-content-ul .pm10").text(data.pm10+"ug/m³");
                }
            },
           error: function(XMLHttpRequest, textStatus, errorThrown) {
			$.msg("获取数据失败!");
		}
        });
    }
        </script>
</html>
